<template>
  <div class="icon">
    <component :is="props.icon" :size="26" />
    <div>{{ props.text }}</div>
  </div>
</template>
<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    icon?: string;
    text?: string;
  }>(),
  {
    icon: 'icon-plus',
    text: 'icon-plus'
  }
);
</script>
<style lang="less" scoped>
.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>
